<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#createCode").blur(function () {
                //验证编码的唯一性以及非空，使用onchange事件
                checkCode();
                $("#saveCreateDicTypeBtn").click(function () {
                    var code = $.trim($("#createCode").val());
                    var name = $.trim($("#createName").val());
                    var description = $.trim($("#createDescription").val());
                    if (checkCode()){
                        $.ajax({
                            url: "settings/dictionary/type/save.do",
                            type: "post",
                            data: {"code": code, "name": name, "description": description},
                            dataType: "json",
                            success: function (data) {
                                if (data.successCode == 1) {
                                    window.location.href = "settings/dictionary/type/index.do";
                                }else {
                                    layer.msg("添加失败")
                                }
                            }
                        })
                    }else {
                        layer.msg("编码不可用，添加失败")
                    }

                });
            });

        });

        //使用checkcode函数检查编码的唯一性
        function checkCode() {
            //存储唯一性检查的结果
            var result = false;

            //验证非空
            var code = $.trim($("#createCode").val());
            if (code == null || code == "") {
                $("#codeMsg").html("编码不能为空");
                return false;
            } else {
                $("#codeMsg").html("");
            }

            //验证编码唯一性
            $.ajax({
                url: "settings/dictionary/type/checkCode.do",
                type: "post",
                async: false,
                data: {"code": code},
                dataType: "json",
                success: function (data) {
                    if (data.successCode == 0) {
                        $("#codeMsg").html(data.message);
                        result = false;
                    } else {
                        $("#codeMsg").html();
                        result = true;
                    }
                }
            })
            return result;
        }

    </script>
</head>
<body>

<div style="position:  relative; left: 30px;">
    <h3>新增字典类型</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button id="saveCreateDicTypeBtn" type="button" class="btn btn-primary">保存</button>
        <button type="button" class="btn btn-default" onclick="window.history.back();">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form">

    <div class="form-group">
        <label for="createCode" class="col-sm-2 control-label">编码<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="createCode" style="width: 200%;" placeholder="请输入编码">
            <span id="codeMsg" style="color: red"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="createName" class="col-sm-2 control-label">名称</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="createName" style="width: 200%;" placeholder="请输入名称">
        </div>
    </div>

    <div class="form-group">
        <label for="createDescription" class="col-sm-2 control-label">描述</label>
        <div class="col-sm-10" style="width: 300px;">
            <textarea class="form-control" rows="3" id="createDescription" style="width: 200%;"
                      placeholder="请输入描述信息"></textarea>
        </div>
    </div>
</form>

<div style="height: 200px;"></div>
</body>
</html>